In this article we are defined maximum components of ExtJs in a simple user form.

This form having textfield component that’s mostly used in ExtJs form.Its also having

Textareafield,datefield,radio buttonfield,checkbox field,combobox(dropdown menu) component,timefield and file field.

Its provide great facility to learn Extjs component in a single user form. 

Ext.onReady(function () {
    Ext.create('Ext.form.Panel', {  // create object of form.panel class
        width: 600,
        height: 600,
        padding:50,
        layout: 'form',  // Define Layout
        layout: {
            type: 'vbox',//define layout type
            pack: 'center'
        },
        
        renderTo: Ext.getBody(),//render to body of html page
        items: [
            {
            xtype: 'textfield',//textfield component
            fieldLabel: 'Name',
        }, {
            xtype: 'textfield',
            fieldLabel: 'Father Name'
        }, {
            xtype: 'textarea',//textarea component
            fieldLabel: 'Address'
        }, {
            xtype: 'datefield',//datefield component
            fieldLabel: 'D.O.B'
        }, {
            xtype: 'fieldcontainer',//fieldcontainer component for radiofield
            fieldLabel: 'Gender',
            layout: 'hbox',
            defaultType: 'radiofield',
            defaults: {
                flex: 1
            },
            items: [
            {                        //radiofield items
                boxLabel: 'Male',
                inputValue: 'male',
                id: 'rdioBtnMle'
            }, {                       
                boxLabel: 'Female',  //radiofield items
                inputValue: 'female',
                id: 'rdioBtnFmle'
            }, {
                boxLabel: 'Others',  //radiofield items
                inputValue: 'other',
                id: 'rdioBtnOthr'
            }]
        }, {
            xtype: 'fieldcontainer',//fieldcontainer component for checkbox
            fieldLabel: 'Education',
            layout: 'vbox',
            defaultType: 'checkboxfield',
            defaults:{
                    flex:1
            },
            items: [{
                boxLabel: 'HighSchool',// checkbox items
                inputValue: 'highSchool',
                id:'chckBxHgSch'
            }, {
                boxLabel: 'Intermediate',// checkbox item
                inputValue: 'intermediate',
                id:'chckbxIntrMdte'
            }, {
                boxLabel: 'Graduation',// checkbox item
                inputValue: 'graduation',
                id:'chckBxGdtn'
            }, {
                boxLabel: 'Post graduation',// checkbox item
                inputValue: 'postgarduation',
                id:'chckBxPstGdtn'
            }]
        }, {
            xtype: 'combobox',//combobox component
            fieldLabel: 'Course',
            store:Ext.create('Ext.data.Store',{
            fields: ['abbr', 'name'],
            data: [{        //combobox item
                abbr: 'be',
                name:'BE/B.tech'
            }, {
                abbr: 'b.a',//combobox item
                name:'B.A'
            }, {
                abbr: 'bcom',//combobox item
                name:'B.Com'
            }, {
                abbr: 'bsc',//combobox item
                name:'B.Sc'
            }]
            }),
            valueField: 'abbr',
            displayField:'name'
        }, {
            xtype: 'numberfield',//numberfield component
            fieldLabel:'Contact'
        }, {
            xtype: 'timefield',//timefield component
            fieldLabel: 'Time',
            minValue: '06:00 AM',
            maxValue:'08:00 PM'
        }, {
            xtype: 'filefield',// filefield component
            fieldLabel:'Upload Photo'
        }, {
            xtype: 'button',//Button component of extjs
            text: 'Submit',
            width:'50%'
        }]
    });
});